Best of Modern JavaScript — Destructuring

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at JavaScript destructuring.

Array Destructuring

We can destructure arrays into variables by their position.

For example, if we have:

const arr = ['a', 'b'];
const [x, y] = arr;

Then x is 'a' and y is 'b' .

Returned values are also processed.

For example, we can write:

const [all, areaCode, officeCode, number] =
/^(ddd)-(ddd)-(dddd)$/
.exec('555-555-1212');

We destructure the matched patterns into their own variables.

exec returns an array with the whole string and the parts matched by patterns so we can assign to variables.

Where can Destructuring be Used?

Destructuring can be used in many places.

For instance, they can be used in arrays:

const [x] = ['a'];
let [x] = ['a'];
var [x] = ['a'];

We assign the array entry into the x variable.

We can also destructure in parameters.

For example, we can write:

`function` `f([x])` `{`
  //...
`}`
`f(['a']);`

And x is 'a' .

Also, we can destructure with the for-of loop:

const arr = ['a', 'b'];
for (const [index, element] of arr.entries()) {
  console.log(index, element);
}

We call arr.entries to get an array with an array of indexes and the element as the entries.

Patterns for Destructuring

If we want to destructure an object or area, we need the source and the target.

The right-hand side is the source and the left-hand side has the target.

For example, we can write:

const obj = {
  a: [{
    foo: 'bar',
    bar: 'abc'
  }, {}],
  b: true
};
const {
  a: [{
    foo: f
  }]
} = obj;

We restructured the nested object with the a array with an object with the foo property inside.

bar doesn’t exist on the right side so we set it to 'abc' as the default value.

b is set to true since it doesn’t exist on the right side.

We don’t have to assign everything to its own variable.

We can just pick what we need.

For example, we can write:

const { x } = { x: 1, y: 3 };

We just destructure x .

So x is 1.

We can do the same with an array:

const [x, y] = ['a', 'b', 'c'];

Then x is 'a' and y is 'b' .

Object Destructuring Coerce Values to Objects

We can use destructuring with primitive values.

For example, we can write:

const {
  length: len
} = 'foo';

And len is 3 since it gets the length property of the string.

We can also destructure numbers by writing:

const {
  toString: s
} = 123;

Then we get the toString method of Number.prototype as the value of s .

Failing to Object-Destructure a Value

A value may not be destructed in some cases.

If the value can’t be converted to an object with ToObject , then it can’t be destructured.

For instance, if we have:

const { prop: x } = undefined;
const { prop: y } = null;

Then we get TypeError in both cases since those properties on the left side don’t exist.

Conclusion

Destructuring can be used in many places.